<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">
    <title>请假记录</title>
    <link href="css/style.css" rel="stylesheet" type="text/css">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
    <script src="js/main.js"></script>
  </head>
  <body>
    <div class="jl-container" id="qj-wrap">
      <div class="title-box">
        <p class="mylist">
          请假记录
        </p>
        <p class="iwantqj">
          <a class="iwantqj-btn" href="index.html">我要请假</a>
        </p>
      </div>

      <div class="qjlist-box qj-container" v-for="item in result.datas">
        <div class="start-time time-box">
          <span>请假开始时间：</span>
          <span class="time-color">{{item.startTime}}</span>
        </div>
        <div class="end-time time-box">
          <span>请假结束时间：</span>
          <span class="time-color">{{item.endTime}}</span>
        </div>
        <div class="apply-time time-box">
          <span>请假申请时间：</span>
          <span class="time-color">{{item.applyTime}}</span>
        </div>
        <div class="qj-reason time-box">
          <span>请假原因：</span>
          <span class="time-color">{{item.reason}}</span>
        </div>
        <div class="time-box">
          <span>状态：</span>
          <span class="time-color">
            <template v-if="item.status == 0"><span style="color:orange;">申请中</span></template>
            <template v-if="item.status == 1"><span style="color:green;">批准</span></template>
            <template v-if="item.status == 2"><span style="color:red;">不批准</span></template>
          </span>
        </div>
        <div class="time-box">
          <span>领导意见：</span>
          <span class="time-color">{{item.suggestion}}</span>
        </div>
      </div>



    </div>
  </body>
  <script type="text/javascript">
  var url="http://118.107.181.199:8088/prevention/app/leave/leaveList";
   var userId="ec4fbe958fd24bcaa037b9788e442b8b";

    var v = new Vue({
      el:"#qj-wrap",
      data:{
        condition:"",
        result:{}
      },
      created: function () {
        var reqData = {
            "condition": "",
            "page": 0,
            "status": "0",
            "type": "1",
            "userId": userId
          }
        $.ajax({
             url: url,
             type: "POST",
             dataType:"json",
             data:JSON.stringify(reqData),
             contentType:'application/json',
             success: function (data) {
                v.result = data;
             },
             error:function(e){
               console.log("error");
             }
         });
      },
      methods:{
        getList:function(event){
          console.log("水水");
        }
      }
    });
  </script>
</html>
